(function () {
    angular.module('app')
        .component('xxHome',{
            templateUrl:'./app/user/home/home.html',
            controller:ctrl
        });

    function ctrl($scope,$state,HomeFactory) {
        var lunbo = document.querySelector(".lunbo");
        var imgList = document.querySelector(".imgList");
        var myImg = document.getElementById('image');
        var imgWidth = parseInt(getComputedStyle(myImg,null)['width']);
        var imgNum = 4;
        var buttons = document.querySelector(".buttons").getElementsByTagName("span");
        var timer;
        var index = 1;  //index指向第一张img

        function animate(offset) {
            // 左右箭头切换图片效果
            //图片移动即更改imageList.styly.left
            //style.left，是相对左边的距离，所以第一张图后style.left都为负值，
            //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
            //无限滚动判断，imgList = [3,1,2,3,1]
            // left>-600即向左滚动到了imgList[0]，left<-1800即向右滚动到了imgList[4]
            var newLeft = parseInt(imgList.style.left) + offset;
            imgList.style.left = newLeft + 'px';
            if (newLeft > -imgWidth) {
                imgList.style.left = -imgWidth * imgNum + 'px';
            }
            if (newLeft < -imgWidth * imgNum) {
                imgList.style.left = -imgWidth + 'px';
            }
        }
        function buttonsShow() {
            for (var i=0; i<buttons.length; i++) {
                // 先清除之前的样式
                //console.log(buttons[i].className);
                if (buttons[i].className === "on") {
                    buttons[i].className = '';
                }
            }
            buttons[index - 1].className = 'on';   //然后把当前img设为on；数组从0开始，所以减1
        }

        function prevImg (){
            index -= 1;
            if (index < 1){
                index = 4;
            }
            buttonsShow();
            animate(imgWidth);
        }

        function nextImg (){
            index += 1;
            if (index > 4) {
                index = 1;
            }
            buttonsShow();
            animate(-imgWidth);
        }

        function play() {
            //重复执行的定时器
            timer = setInterval(function() {
                buttonsShow();
                nextImg();
                //animate(-600);
            }, 2000)
        }

        function stop() {
            clearInterval(timer);
        }

        for (var i = 0; i < buttons.length; i++) {
            // 这里使用的是立即执行函数，
            (function(i) {
                buttons[i].onclick = function() {
                    var clickIndex = parseInt(this.getAttribute('index'));
                    var offset = imgWidth * (index - clickIndex);
                    animate(offset);
                    index = clickIndex;
                    buttonsShow();
                }
            })(i)
        }

        $scope.prevImg = prevImg;
        $scope.nextImg = nextImg;
        play();
        lunbo.onmouseover = stop;   //鼠标移上图片停止播放
        lunbo.onmouseout = play;    //鼠标移开继续播放
    }
})();
